<template>
  <a-modal
    :visible="show"
    width="85vw"
    height="60vh"
    :bodyStyle="{ padding: '10px' }"
    title="验收付款单"
    @ok="handleCancel"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-button type="primary" @click="createAccept()" class="hte-btn">新增</a-button>
    <a-button @click="fetchPaymentList" class="hte-btn">刷新</a-button>
    <a-table
      :columns="[...paymentColumns, ...deleteColums]"
      :data-source="paymentRecords"
      rowKey="id"
      bordered
      :pagination="false"
      @change="paymentHandleTableChange"
      :customRow="customPaymentRow"
    >
      <template slot="handlerStepRender" slot-scope="text, record">
        {{ record.handlerStep }}
        <!-- <template v-for="(code, index) in codes.WorkReportTaskPaymentStatus">
            <span :key="index" v-if="record.status == code.code"> {{ code.name }} </span>
          </template> -->
      </template>
      <template slot="statusRender" slot-scope="text, record">
        <template v-for="(code, index) in codes.WorkReportTaskPaymentStatus">
          <span :key="index" v-if="record.status == code.code"> {{ code.name }} </span>
        </template>
      </template>
      <template slot="currentHandlerRender" slot-scope="text, record">
        {{ currentHandlerRenderFunc(record) }}
      </template>
      <template slot="applyNoRender" slot-scope="text, record">
        <span class="font-active" style="cursor: pointer" @click="toPaymentDetail(record)">
          {{ record.applyNo }}
        </span>
      </template>
      <span slot="actionRender" slot-scope="text, record">
        <span
          v-if="(['1', '3'].indexOf(record.status) > -1 && record.applyUserId == currUserId) || record.status == '0'"
          class="font-active"
          style="cursor: pointer"
          @click="toDelPayment(record)"
        >
          删除
        </span>
      </span>
    </a-table>
    <a-pagination
      v-if="paymentRecords.length > 0"
      style="padding: 15px 30px"
      v-model="pagination.current"
      :page-size-options="pageSizeOptions"
      :total="pagination.total"
      show-size-changer
      :page-size="pagination.pageSize"
      @change="pageChange"
      @showSizeChange="onShowSizeChange"
      :show-total="total => `共 ${total} 条`"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
        <span v-if="props.value === '50'">全部</span>
      </template>
    </a-pagination>
  </a-modal>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import { Modal } from 'ant-design-vue'
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    permission: {
      type: Array,
      default: () => {
        return []
      }
    },
    taskId: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      currUserId: this.$store.getters.userInfo.username,
      paymentColumns: [
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'statusRender' },
          width: '100px',
          align: 'center'
        },
        {
          title: '当前步骤',
          dataIndex: 'handlerStep',
          scopedSlots: { customRender: 'handlerStepRender' },
          width: '140px',
          align: 'center'
        },
        {
          title: '当前处理人/接收时间/停留时间',
          dataIndex: 'handlerUser',
          scopedSlots: { customRender: 'currentHandlerRender' },
          width: '250px',
          align: 'center'
        },
        {
          title: '申请流水号',
          dataIndex: 'applyNo',
          scopedSlots: { customRender: 'applyNoRender' },
          width: '150px',
          align: 'center'
        },
        {
          title: '申请人',
          dataIndex: 'applyUserName',
          width: '100px',
          align: 'center'
        },
        {
          title: '合同名称',
          dataIndex: 'contractName',
          width: '200px',
          align: 'center'
        },
        {
          title: '采购订单号',
          dataIndex: 'purchaseOrderNumber',
          width: '150px',
          align: 'center'
        },
        {
          title: 'PO/行号',
          dataIndex: 'poLine',
          width: '120px',
          align: 'center'
        },
        {
          title: '本次支付金额(含税)',
          dataIndex: 'payAmount',
          width: '180px',
          align: 'center'
        }
      ],
      deleteColums: [
        {
          title: '操作',
          width: '5%',
          align: 'center',
          scopedSlots: { customRender: 'actionRender' }
        }
      ],
      urls: {
        paymentList: '/workReport/payment/page',
        delPayment: '/workReport/payment/delete',
        myPermission: '/workReport/project/myPermission',
        codes: '/manage/codeInfo/queryByTypes'
      },
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        total: 0
      },
      pageSizeOptions: ['10', '20', '30'],
      paymentRecords: [],
      codes: {}
    }
  },
  mounted() {
    this.fetchCodes()
  },
  computed: {
    loadList() {
      return this.show
    }
  },
  methods: {
    fetchCodes() {
      getAction(this.urls.codes, { types: 'WorkReportTaskPaymentStatus' }).then(res => {
        if (res.success) {
          this.codes = { ...this.codes, ...res.result }
        }
      })
    },
    fetchPermission() {
      getAction(this.urls.myPermission, { projectId: this.task.projectId }).then(res => {
        if (res.success) {
          this.permission = res.result
        }
      })
    },
    checkPermission(powers) {
      let hasPower = false
      for (let p of powers) {
        if (this.permission.indexOf(p) > -1) {
          hasPower = true
          break
        }
      }
      return hasPower
    },
    customPaymentRow(record) {
      return {
        on: {
          dblclick: event => {
            this.toPaymentDetail(record)
          }
        }
      }
    },
    toPaymentDetail(record) {
      let urlJump = this.$router.resolve({ path:'/workReport/editPayment/' + record.id })
      window.open(urlJump.href, '_blank')
    },
    fetchPaymentList() {
      this.$set(this.pagination, 'taskId', this.taskId)
      postAction(this.urls.paymentList, this.pagination).then(res => {
        if (res.success) {
          this.paymentRecords = res.result.records
          this.$set(this.pagination, 'total', res.result.total)
        }
      })
    },
    /**
     * 表结构切换页码
     */
    paymentHandleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.pagination.pageNo = this.pagination.current
      this.fetchPaymentList()
    },
    currentHandlerRenderFunc(record) {
      let text = ''
      if (record.handlerUser) {
        if (record.handlerTime) {
          // text = record.handlerUser + '/' + record.handlerTime
          // var startDate = new Date(record.handlerTime).getTime()
          // var endDate = new Date().getTime()
          // var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000)
          // text += '/' + parseInt(days) + '天'
          text = record.handlerUser + '/' + record.handlerTime + '/' + record.stayDays + '天'
        }
      }
      return text
    },
    toPaymentDetail(record) {
      let urlJump = this.$router.resolve({ path:'/workReport/editPayment/' + record.id })
      window.open(urlJump.href, '_blank')
      this.$emit('hide')
    },
    toDelPayment(record) {
      let that = this
      Modal.confirm({
        title: '提醒',
        content: '是否确认删除合同验收/付款审批表[' + record.applyNo + ']',
        onOk() {
          postAction(that.urls.delPayment + '/' + record.id, {}).then(res => {
            if (res.success) {
              that.$messageWorkReport.success('删除成功')
              that.fetchPaymentList()
            } else {
              that.$messageWorkReport.error('删除失败')
            }
          })
        },
        onCancel() {}
      })
    },
    handleCancel() {
      this.$emit('hide')
    },
    pageChange(pageNo, pageSize) {
      this.$set(this.pagination, 'pageSize', pageSize)
      this.$set(this.pagination, 'pageNo', pageNo)
      this.fetchPaymentList()
    },
    onShowSizeChange(current, pageSize) {
      this.pagination.current = 1
      this.pagination.pageSize = pageSize
      this.fetchQualityList()
    },
    createAccept() {
      this.$emit('createAccept')
      this.$emit('hide')
    }
  },
  watch: {
    loadList(newV, oldV) {
      if (newV) {
        this.$set(this.pagination, 'current', 1)
        this.fetchPaymentList()
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .container {
    .content {
      margin-top: 20px;
      section {
        .section-table {
          .add-btn {
            margin-left: 0;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
  .tips-box {
    margin-top: 32px;
    .add-btn {
      width: 180px;
      height: 40px;
      line-height: 40px;
      background-color: #4095e4;
      border-radius: 2px;
    }
  }
}
.icon-file {
  background-image: url('~@assets/file.png');
}
.cr-content-pop {
  p {
    margin-bottom: 15px;
    color: #666;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
